<template>
  <!-- 注意：模板中使用 ref 对象会自动解套，无需书写 .value -->
  <h1>{{ isCheck }}</h1>
  <button @click="changeBtn">按钮</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    // ref 可以把基本类型数据包装成响应式 ref对象
    const isCheck = ref(true)
    // 打印查看包装后的结果
    console.log(isCheck)

    const changeBtn = () => {
      // ref 对象访问和修改值都需通过 xxx.value
      isCheck.value = !isCheck.value
    }

    // ref 也可以把对象数据进行包装
    const obj = ref({
      name: 'ls',
      age: 20,
    })
    // 访问或修改的时候同理需要写 xxx.value 访问对象
    console.log(obj.value.age)

    return { isCheck, changeBtn }
  },
})
</script>
